<template>
  <absolute-container class="p-[20px]">
    <page-main
      class="flex h-full flex-col rounded-[4px] bg-[#fff] px-[16px] pb-0 pt-[16px]"
      style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
    >
      <QueryForm ref="refQueryForm" :getDataList="getDataList" @create-flow="addFlow"></QueryForm>
      <div class="el-form-item">
        <t-button svgIcon="ic-btn-add" @click="addFlow">新建流程</t-button>
      </div>

      <el-table height="100%" :data="dataList" row-key="id">
        <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
        <el-table-column :prop="PROPS.key" :label="LABELS.key" min-width="180" />
        <el-table-column :prop="PROPS.name" :label="LABELS.name" min-width="180" />
        <el-table-column :prop="PROPS.createdAt" :label="LABELS.createdAt" min-width="180" />
        <el-table-column class-name="!px-[0px]" label="操作" align="left" fixed="right" width="140">
          <template #default="{ row }">
            <div class="space-x-[12px]">
              <span class="cursor-pointer text-[#1D7FF2]" @click="onEdit(row)">编辑</span>
              <span class="cursor-pointer text-[#1D7FF2]" @click="modelerPublishIndex(row)">发布</span>
              <span class="cursor-pointer text-[#1D7FF2]" @click="modelerDeployIndex(row)">部署</span>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
      <div class="addShadow relative -left-[16px] -top-[1px] z-50 w-[calc(100%+32px)]">
        <el-pagination
          :current-page="pagination.page"
          :total="pagination.total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </page-main>
    <DetailDrawer v-model="drawerVisible" @on-submit-success="getDataList" />
  </absolute-container>
</template>

<script>
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import { modelerDeploy, modelerList, modelerPublish } from "@/api/model";
import paginationMixin from "@/mixin/pagination";

export default {
  name: "FlowPathMgmt",
  components: { QueryForm, DetailDrawer },
  mixins: [paginationMixin],
  data() {
    return {
      ...config,
      id: "",
      dataList: [],
      drawerVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList(param) {
      modelerList(this.getParams(param)).then((res) => {
        const { content, totalElements } = res;
        this.dataList = content;
        this.pagination.total = totalElements;
      });
    },
    onEdit(row) {
      this.$router.push({
        path: `flow-path-detail-mgmt/${row.id}`,
        query: {
          [this.$store.state.settings.detailName]: row.name,
        },
      });
    },
    async modelerPublishIndex(row) {
      try {
        await this.$confirm(`确定发布「${row["name"]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await modelerPublish({ modelId: row.id });
          this.$message.success("发布成功");
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消发布");
      }
    },
    async modelerDeployIndex(row) {
      try {
        await this.$confirm(`确定部署「${row["name"]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await modelerDeploy({ modelId: row.id });
          this.$message.success("部署成功");
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消部署");
      }
    },
    addFlow() {
      this.drawerVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.addShadow {
  display: inline-flex;
  justify-content: flex-end;
  height: 68px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 0.08);
}
</style>
